import { useNavigate } from '../../hook/useNavigate.ts';
import React from 'react';
import type { CSSProperties } from 'react';

// AdminLink组件接口定义
interface AdminLinkProps {
  to: string;              // 跳转路径
  children: React.ReactNode; // 链接内容
  className?: string;      // 可选的CSS类名
  style?: CSSProperties;   // 可选的内联样式
  target?: string;         // 可选的目标窗口属性
  title?: string;          // 可选的提示文本
  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void; // 可选的点击回调
}

const AdminLink: React.FC<AdminLinkProps> = ({
  to,
  children,
  className = '',
  style,
  target,
  title,
  onClick
}) => {
  const navigate = useNavigate();
  
  // 处理点击事件
  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    // 如果有传入的onClick回调，先执行它
    onClick?.(e);
    
    // 如果设置了target="_blank"或者按下了ctrl/meta键，使用默认行为
    if (target === '_blank' || e.ctrlKey || e.metaKey) {
      return;
    }
    
    // 阻止默认行为并使用navigate进行导航
    e.preventDefault();
    navigate(to);
  };

  return (
    <a 
      href={to}
      className={className}
      style={style}
      target={target}
      title={title}
      onClick={handleClick}
    >
      {children}
    </a>
  );
};

export default AdminLink;